'use client'

import Link from 'next/link'
import { ExternalLink } from 'lucide-react'

interface ToolAccessButtonProps {
  tool: {
    id: string
    url: string
    isDeployed?: boolean
    deployPath?: string
    title: string
  }
  className?: string
}

export function ToolAccessButton({ tool, className = "" }: ToolAccessButtonProps) {
  // 判断是否应该使用本地部署版本
  const shouldUseDeployed = tool.isDeployed && tool.deployPath && tool.deployPath.trim() !== ""
  
  const baseClassName = `inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors ${className}`

  if (shouldUseDeployed) {
    // 使用本地部署版本
    return (
      <Link
        href={`/tools/deployed/${tool.id}?pure=true`}
        className={baseClassName}
      >
        <ExternalLink className="h-4 w-4 mr-2" />
        使用工具
      </Link>
    )
  } else {
    // 使用外部链接
    return (
      <a
        href={tool.url}
        target="_blank"
        rel="noopener noreferrer"
        className={baseClassName}
      >
        <ExternalLink className="h-4 w-4 mr-2" />
        访问工具
      </a>
    )
  }
}
